<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Teacher Huang's Writing Game III 🇨🇳</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700;900&family=Ma+Shan+Zheng&display=swap" rel="stylesheet">
    <style>
        @font-face {
            font-family: 'HuawenCaiyun';
            src: url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap');
            font-weight: normal;
            font-style: normal;
        }
    </style>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Noto Serif SC', serif;
            -webkit-tap-highlight-color: transparent;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        
        input, textarea {
            -webkit-user-select: text;
            -moz-user-select: text;
            -ms-user-select: text;
            user-select: text;
        }
        
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #4facfe 100%);
            background-image: 
                radial-gradient(circle at 20% 80%, rgba(102, 126, 234, 0.4) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(118, 75, 162, 0.3) 0%, transparent 50%),
                radial-gradient(circle at 40% 40%, rgba(240, 147, 251, 0.3) 0%, transparent 50%),
                radial-gradient(circle at 60% 60%, rgba(245, 87, 108, 0.2) 0%, transparent 50%);
            min-height: 100vh;
            color: #2c2c2c;
            padding: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow-x: hidden;
            position: relative;
        }
        
        body::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y="50" font-size="20" fill="rgba(255,255,255,0.15)">✨</text></svg>'),
                url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y="50" font-size="15" fill="rgba(255,255,255,0.1)">🌸</text></svg>'),
                url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y="50" font-size="18" fill="rgba(255,255,255,0.08)">💫</text></svg>');
            background-size: 60px 60px, 40px 40px, 50px 50px;
            background-position: 0 0, 30px 30px, 15px 15px;
            pointer-events: none;
        }
        
        @keyframes float {
            0% { transform: translateY(0px) rotate(0deg); }
            100% { transform: translateY(-100px) rotate(360deg); }
        }
        
        .neon-border {
            position: relative;
            padding: 12px;
            border-radius: 25px;
            overflow: hidden;
            box-shadow: 0 8px 32px rgba(102, 126, 234, 0.4), inset 0 0 20px rgba(255, 255, 255, 0.8);
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 248, 240, 0.9));
            backdrop-filter: blur(15px);
            border: 3px solid #667eea;
        }
        
        .neon-border::before {
            content: '';
            position: absolute;
            top: -4px;
            left: -4px;
            right: -4px;
            bottom: -4px;
            background: linear-gradient(45deg, #667eea, #764ba2, #f093fb, #f5576c, #4facfe, #667eea);
            background-size: 400% 400%;
            border-radius: 28px;
            z-index: -1;
        }
        
        @keyframes gradient {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        
        .container {
            width: 100%;
            max-width: 100%;
            padding: 15px;
        }
        
        header {
            text-align: center;
            padding: 30px 25px;
            margin-bottom: 30px;
            border-bottom: 3px solid #ffd700;
            position: relative;
        }
        
        header::after {
            content: '';
            position: absolute;
            bottom: -3px;
            left: 50%;
            transform: translateX(-50%);
            width: 120px;
            height: 3px;
            background: linear-gradient(90deg, transparent, #dc143c, transparent);
        }
        
        h1 {
            font-family: 'Times New Roman', serif;
            font-size: 2.4rem;
            margin-bottom: 18px;
            color: #667eea;
            text-shadow: 2px 2px 4px rgba(102, 126, 234, 0.4), 0 0 15px rgba(118, 75, 162, 0.3), 0 0 25px rgba(240, 147, 251, 0.2);
            letter-spacing: 4px;
            font-weight: 900;
            position: relative;
        }
        
        h1::before {
            content: '✨';
            position: absolute;
            left: -60px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 2rem;
        }
        
        h1::after {
            content: '🌸';
            position: absolute;
            right: -60px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 2rem;
        }
        
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% { transform: translateY(-50%); }
            40% { transform: translateY(-60%); }
            60% { transform: translateY(-55%); }
        }
        
        .subtitle {
            font-size: 1.2rem;
            color: #8b0000;
            margin-bottom: 25px;
            font-style: italic;
            text-shadow: 1px 1px 2px rgba(220, 20, 60, 0.2);
            font-weight: 700;
        }
        
        .game-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            background: rgba(255, 255, 255, 0.9);
            padding: 20px;
            border-radius: 15px;
            margin: 25px 0;
            border: 3px solid #ffd700;
            position: relative;
            overflow: hidden;
            box-shadow: inset 0 0 15px rgba(220, 20, 60, 0.1);
        }
        
        .game-stats::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, transparent, #dc143c, transparent);
            animation: scanline 3s linear infinite;
        }
        
        @keyframes scanline {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }
        
        .stat-box {
            text-align: center;
            padding: 15px;
            background: linear-gradient(135deg, #f093fb, #f5576c);
            border-radius: 12px;
            border: 2px solid #667eea;
            position: relative;
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
            transition: transform 0.3s ease;
        }
        
        .stat-box:hover {
            transform: translateY(-3px);
        }
        
        .stat-value {
            font-size: 1.9rem;
            font-weight: bold;
            color: #667eea;
            text-shadow: 1px 1px 2px rgba(102, 126, 234, 0.3);
        }
        
        .stat-label {
            font-size: 0.9rem;
            color: #2d3436;
            font-weight: 600;
        }
        
        .game-area {
            display: flex;
            flex-direction: column;
            gap: 20px;
            margin: 20px 0;
        }
        
        .challenge-section {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            padding: 25px;
            border: 3px solid #ffd700;
            box-shadow: 0 6px 20px rgba(220, 20, 60, 0.2);
            position: relative;
        }
        
        .challenge-section::before {
            content: '★';
            position: absolute;
            top: -15px;
            left: 20px;
            background: #ffd700;
            color: #dc143c;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            font-weight: bold;
            border: 2px solid #dc143c;
        }
        
        .section-title {
            font-size: 1.4rem;
            font-weight: bold;
            color: #667eea;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            text-shadow: 1px 1px 2px rgba(102, 126, 234, 0.3);
            font-weight: 700;
        }
        
        .section-title i {
            margin-right: 15px;
            color: #667eea;
            font-size: 1.6rem;
        }
        
        #chinese-prompt {
            font-size: 1.3rem;
            line-height: 1.6;
            margin-bottom: 25px;
            padding: 25px;
            border-radius: 15px;
            min-height: 140px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 248, 240, 0.9));
            border: 3px solid #667eea;
            box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3), 
                        inset 0 0 15px rgba(255, 255, 255, 0.6);
            color: #000000;
            font-weight: bold;
            text-align: center;
            position: relative;
            font-family: 'Noto Serif SC', serif;
        }
        
        #chinese-prompt::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, 
                transparent, 
                rgba(220, 20, 60, 0.1), 
                transparent);
            animation: shine 3s infinite;
        }
        
        @keyframes shine {
            0% { transform: translateX(-100%); }
            30% { transform: translateX(100%); }
            100% { transform: translateX(100%); }
        }
        
        .word-bank {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 20px;
        }
        
        .word-option {
            background: linear-gradient(135deg, #667eea, #764ba2);
            padding: 15px 20px;
            border-radius: 12px;
            cursor: pointer;
            user-select: none;
            transition: all 0.3s;
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
            font-size: 1.2rem;
            color: #fff;
            font-weight: bold;
            text-shadow: 1px 1px 2px rgba(44, 44, 44, 0.3);
            position: relative;
            overflow: hidden;
            border: 2px solid #f093fb;
        }
        
        .word-option:hover {
            transform: translateY(-3px) scale(1.02);
            box-shadow: 0 6px 18px rgba(102, 126, 234, 0.6);
            background: linear-gradient(135deg, #764ba2, #f093fb);
        }
        
        .word-option::before {
            content: '';
            position: absolute;
            top: -100%;
            left: -100%;
            width: 300%;
            height: 300%;
            background: rgba(255, 255, 255, 0.1);
            transform: rotate(45deg);
            transition: all 0.6s;
        }
        
        .word-option:hover::before {
            top: -50%;
            left: -50%;
        }
        
        #sentence-area {
            flex-grow: 1;
            min-height: 200px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 15px;
            padding: 25px;
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
            gap: 12px;
            margin-bottom: 25px;
            border: 3px solid #667eea;
            box-shadow: inset 0 0 20px rgba(102, 126, 234, 0.2);
            position: relative;
        }
        
        .word-placed {
            background: linear-gradient(135deg, #f093fb, #f5576c);
            padding: 12px 18px;
            border-radius: 10px;
            cursor: pointer;
            user-select: none;
            box-shadow: 0 4px 12px rgba(240, 147, 251, 0.5);
            animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            font-size: 1.2rem;
            color: #000000;
            font-weight: bold;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
            position: relative;
            overflow: hidden;
            border: 2px solid #667eea;
        }
        
        @keyframes popIn {
            0% { transform: scale(0) rotate(-15deg); opacity: 0; }
            70% { transform: scale(1.1) rotate(5deg); }
            100% { transform: scale(1) rotate(0); opacity: 1; }
        }
        
        .controls {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
        }
        
        .btn {
            padding: 16px 12px;
            border: none;
            border-radius: 12px;
            font-size: 1.1rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            white-space: nowrap;
            color: #fff;
            text-shadow: 1px 1px 2px rgba(44, 44, 44, 0.3);
            font-family: 'Noto Serif SC', serif;
            letter-spacing: 1px;
            position: relative;
            overflow: hidden;
            z-index: 1;
            border: 2px solid #ffd700;
        }
        
        .btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.1);
            opacity: 0;
            transition: all 0.5s;
        }
        
        .btn:hover::before {
            opacity: 1;
        }
        
        .btn:active {
            transform: translateY(5px);
        }
        
        #check-btn {
            background: linear-gradient(135deg, #667eea, #764ba2);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.5);
        }
        
        #check-btn:hover {
            background: linear-gradient(135deg, #764ba2, #f093fb);
            transform: translateY(-2px);
            box-shadow: 0 6px 18px rgba(102, 126, 234, 0.6);
        }
        
        #reset-btn {
            background: linear-gradient(135deg, #f5576c, #4facfe);
            box-shadow: 0 4px 12px rgba(245, 87, 108, 0.5);
        }
        
        #reset-btn:hover {
            background: linear-gradient(135deg, #4facfe, #f093fb);
            transform: translateY(-2px);
            box-shadow: 0 6px 18px rgba(245, 87, 108, 0.6);
        }
        
        #hint-btn {
            background: linear-gradient(135deg, #f093fb, #f5576c);
            box-shadow: 0 4px 12px rgba(240, 147, 251, 0.5);
        }
        
        #hint-btn:hover {
            background: linear-gradient(135deg, #f5576c, #4facfe);
            transform: translateY(-2px);
            box-shadow: 0 6px 18px rgba(240, 147, 251, 0.6);
        }
        
        .feedback {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            padding: 25px;
            margin-top: 20px;
            border: 3px solid #667eea;
            box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
            display: none;
        }
        
        .feedback.show {
            display: block;
            animation: slideIn 0.5s ease-out;
        }
        
        @keyframes slideIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .feedback-title {
            font-size: 1.3rem;
            font-weight: bold;
            color: #667eea;
            margin-bottom: 15px;
            text-align: center;
            text-shadow: 1px 1px 2px rgba(102, 126, 234, 0.3);
        }
        
        #feedback-text {
            font-size: 1.1rem;
            line-height: 1.6;
            color: #000000;
            text-align: center;
            font-weight: 700;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
        }
        
        .stars {
            display: flex;
            justify-content: center;
            margin: 20px 0;
        }
        
        .star {
            font-size: 2rem;
            color: #ffd700;
            margin: 0 5px;
            animation: twinkle 2s infinite;
        }
        
        @keyframes twinkle {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        
        .level-progress {
            margin-top: 20px;
        }
        
        .progress-container {
            width: 100%;
            height: 15px;
            background: rgba(220, 20, 60, 0.2);
            border-radius: 8px;
            overflow: hidden;
            margin: 10px 0;
        }
        
        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #dc143c, #ffd700);
            transition: width 0.5s ease;
        }
        
        .level-info {
            display: flex;
            justify-content: space-between;
            font-size: 0.9rem;
            color: #000000;
            margin-top: 5px;
            font-weight: 700;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
        }
        
        .completion-details {
            background: rgba(255, 255, 255, 0.9);
            border-radius: 15px;
            padding: 20px;
            margin-top: 20px;
            border: 2px solid #ffd700;
            display: none;
        }
        
        .completion-details h3 {
            color: #667eea;
            margin-bottom: 15px;
            text-align: center;
            text-shadow: 1px 1px 2px rgba(102, 126, 234, 0.3);
        }
        
        .completion-details p {
            margin-bottom: 10px;
            color: #000000;
            font-weight: 700;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
        }
        
        .completion-value {
            font-weight: bold;
            color: #667eea;
            text-shadow: 1px 1px 2px rgba(102, 126, 234, 0.3);
        }
        
        .player-name-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }
        
        .name-input-container {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 248, 240, 0.9));
            border-radius: 20px;
            padding: 40px;
            text-align: center;
            border: 3px solid #667eea;
            box-shadow: 0 8px 32px rgba(102, 126, 234, 0.4);
            max-width: 400px;
            width: 90%;
        }
        
        .name-input-title {
            font-size: 1.8rem;
            color: #667eea;
            margin-bottom: 20px;
            font-weight: bold;
            text-shadow: 1px 1px 2px rgba(102, 126, 234, 0.3);
        }
        
        .name-input {
            width: 100%;
            padding: 15px;
            font-size: 1.2rem;
            border: 2px solid #667eea;
            border-radius: 10px;
            margin-bottom: 20px;
            text-align: center;
            background: rgba(255, 255, 255, 0.9);
            color: #000000;
            font-weight: bold;
        }
        
        .name-input:focus {
            outline: none;
            border-color: #f093fb;
            box-shadow: 0 0 10px rgba(240, 147, 251, 0.3);
        }
        
        .start-game-btn {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            padding: 15px 30px;
            border: none;
            border-radius: 10px;
            font-size: 1.2rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
        }
        
        .start-game-btn:hover {
            background: linear-gradient(135deg, #764ba2, #f093fb);
            transform: translateY(-2px);
            box-shadow: 0 6px 18px rgba(102, 126, 234, 0.6);
        }
        
        .start-game-btn:disabled {
            opacity: 0.7;
            cursor: not-allowed;
            transform: none;
        }
        
        /* 移动端优化 */
        @media (max-width: 768px) {
            .name-input-container {
                padding: 30px 20px;
                max-width: 350px;
            }
            
            .name-input-title {
                font-size: 1.5rem;
                margin-bottom: 15px;
            }
            
            .name-input {
                padding: 12px;
                font-size: 1.1rem;
            }
            
            .start-game-btn {
                padding: 12px 25px;
                font-size: 1.1rem;
            }
            
            /* 减少动画效果以提升性能 */
            .anime-decoration {
                animation: none;
            }
            
            .floating-stars .star {
                animation-duration: 3s;
            }
        }
        
        .patriotic-decoration {
            position: absolute;
            top: 20px;
            right: 20px;
            font-size: 2rem;
        }
        
        .anime-decoration {
            position: absolute;
            top: 20px;
            right: 80px;
            width: 180px;
            height: 180px;
            background-image: url('https://youke1.picui.cn/s1/2025/09/25/68d49b9ca7ec8.png');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            z-index: 10;
        }
        
        @keyframes wave {
            0%, 100% { transform: rotate(0deg); }
            25% { transform: rotate(10deg); }
            75% { transform: rotate(-10deg); }
        }
        
        .sparkle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: #fff;
            border-radius: 50%;
            animation: sparkle 2s infinite;
        }
        
        @keyframes sparkle {
            0%, 100% { opacity: 0; transform: scale(0); }
            50% { opacity: 1; transform: scale(1); }
        }
        
        .anime-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -1;
        }
        
        .anime-bg::before {
            content: '';
            position: absolute;
            top: 20%;
            left: 10%;
            width: 100px;
            height: 100px;
            background: radial-gradient(circle, rgba(255, 107, 157, 0.3) 0%, transparent 70%);
            border-radius: 50%;
        }
        
        .anime-bg::after {
            content: '';
            position: absolute;
            top: 60%;
            right: 15%;
            width: 80px;
            height: 80px;
            background: radial-gradient(circle, rgba(118, 75, 162, 0.3) 0%, transparent 70%);
            border-radius: 50%;
        }
        
        .flag-decoration {
            position: absolute;
            top: 20px;
            left: 20px;
            width: 180px;
            height: 180px;
            background-image: none;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            z-index: 10;
        }
        
        .floating-stars {
            display: none;
        }
        
        @media (max-width: 768px) {
            .container {
                padding: 8px;
                max-width: 100%;
            }
            
            header {
                padding: 20px 15px;
                margin-bottom: 20px;
            }
            
            h1 {
                font-size: 1.6rem;
                letter-spacing: 1px;
                margin-bottom: 12px;
            }
            
            h1::before, h1::after {
                display: none;
            }
            
            .subtitle {
                font-size: 0.9rem;
                margin-bottom: 15px;
            }
            
            .game-stats {
                grid-template-columns: repeat(2, 1fr);
                gap: 8px;
                padding: 12px;
                margin: 15px 0;
            }
            
            .stat-box {
                padding: 10px;
            }
            
            .stat-value {
                font-size: 1.3rem;
            }
            
            .stat-label {
                font-size: 0.7rem;
            }
            
            .challenge-section {
                padding: 15px;
                margin: 10px 0;
            }
            
            .section-title {
                font-size: 1.1rem;
                margin-bottom: 12px;
            }
            
            .section-title i {
                font-size: 1.3rem;
                margin-right: 10px;
            }
            
            #chinese-prompt {
                font-size: 1rem;
                padding: 15px;
                min-height: 100px;
                line-height: 1.4;
            }
            
            .word-bank {
                gap: 8px;
                margin-top: 15px;
            }
            
            .word-option {
                padding: 10px 12px;
                font-size: 0.9rem;
                border-radius: 8px;
            }
            
            #sentence-area {
                min-height: 120px;
                padding: 15px;
                gap: 8px;
            }
            
            .word-placed {
                padding: 8px 12px;
                font-size: 0.9rem;
                border-radius: 8px;
            }
            
            .controls {
                gap: 6px;
                margin-top: 15px;
            }
            
            .btn {
                padding: 10px 6px;
                font-size: 0.9rem;
                border-radius: 8px;
            }
            
            .feedback {
                padding: 15px;
                margin-top: 15px;
            }
            
            .feedback-title {
                font-size: 1.1rem;
                margin-bottom: 10px;
            }
            
            #feedback-text {
                font-size: 1rem;
                line-height: 1.4;
            }
            
            .stars {
                margin: 15px 0;
            }
            
            .star {
                font-size: 1.8rem;
                margin: 0 6px;
            }
            
            .level-progress {
                margin-top: 15px;
            }
            
            .progress-container {
                height: 12px;
                margin: 10px 0;
            }
            
            .level-info {
                font-size: 0.8rem;
                margin-top: 5px;
            }
            
            .completion-details {
                padding: 12px;
                font-size: 0.9rem;
                margin-top: 15px;
            }
        }
    </style>
</head>
<body>
    <div class="patriotic-decoration">✨</div>
    <div class="anime-decoration"></div>
    <div class="anime-bg"></div>
    <div class="flag-decoration"></div>
    
    <!-- 玩家姓名输入界面 -->
    <div class="player-name-modal" id="name-modal">
        <div class="name-input-container">
            <div class="name-input-title">Please Enter Your Name</div>
            <input type="text" class="name-input" id="player-name-input" placeholder="Enter your name here" maxlength="20">
            <button class="start-game-btn" id="start-game-btn">Start Game</button>
        </div>
    </div>

    <div class="neon-border">
        <div class="container">
            <header>
                <h1>Teacher Huang's Writing Game 3</h1>
                <div class="subtitle">National Day English Writing Challenge</div>
                <div class="player-name-display" id="player-name-display" style="display: none;"></div>
            </header>

            <div class="game-stats">
                <div class="stat-box">
                    <div class="stat-value" id="score">0</div>
                    <div class="stat-label">Score</div>
                </div>
                <div class="stat-box">
                    <div class="stat-value" id="level">1/6</div>
                    <div class="stat-label">Level</div>
                </div>
                <div class="stat-box">
                    <div class="stat-value" id="timer">5:00</div>
                    <div class="stat-label">Time</div>
                </div>
            </div>

            <div class="game-area">
                <div class="challenge-section">
                    <div class="section-title">
                        <i class="fas fa-pen-fancy"></i>
                        Sentence Construction Challenge
                    </div>
                    
                    <div id="chinese-prompt">
                        请将以下中文句子翻译成英文，并按照正确的语序排列单词
                    </div>
                    
                    <div class="word-bank" id="word-bank">
                        <!-- Word options will be generated here dynamically -->
                    </div>
                    
                    <div id="sentence-area">
                        <!-- Dragged words will be displayed here -->
                    </div>
                    
                    <div class="controls">
                        <button class="btn" id="check-btn">
                            <i class="fas fa-check"></i>
                            Check Answer
                        </button>
                        <button class="btn" id="reset-btn">
                            <i class="fas fa-redo"></i>
                            Reset
                        </button>
                        <button class="btn" id="hint-btn">
                            <i class="fas fa-lightbulb"></i>
                            Hint
                        </button>
                    </div>
                    
                    <div class="feedback" id="feedback">
                        <div class="feedback-title" id="feedback-title">Feedback</div>
                        <div id="feedback-text">Please check your answer</div>
                        <div class="stars" id="stars">
                            <span class="star">★</span>
                            <span class="star">★</span>
                            <span class="star">★</span>
                        </div>
                    </div>
                    
                    <div class="level-progress">
                        <div class="progress-container">
                            <div class="progress-fill" id="progress-fill"></div>
                        </div>
                        <div class="level-info">
                            <span>LEVEL <span id="current-level">1</span>/6</span>
                            <span>NEXT: <span id="next-level">2</span></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Game data - New six sentences
        const challenges = [
            {
                chinese: "听到这个消息，他很高兴，仿佛所有的烦恼都消失了。",
                english: "The moment he heard the news, a dazzling smile lit up his face as if all the worries had melted away.",
                words: ["The moment", "he heard", "the news,", "a dazzling", "smile", "lit up", "his face", "as if", "all the", "worries", "had melted", "away."],
                hint: "Note: Time clause with 'The moment' and comparison with 'as if'",
                explanation: "Time adverbial clause 'The moment' means 'as soon as', 'as if' introduces a comparative clause, 'lit up' means to illuminate, 'melted away' means to disappear."
            },
            {
                chinese: "正是父母的爱和支持孕育了我的梦想，给予我追求梦想的勇气。（强调句）",
                english: "It was the unwavering love and support from my parents that nourished my dream and gave me the courage to pursue it.",
                words: ["It was", "the unwavering", "love and support", "from my parents", "that", "nourished", "my dream", "and gave me", "the courage", "to pursue", "it."],
                hint: "Note: Emphatic sentence structure 'It was...that...'",
                explanation: "Emphatic sentence structure 'It was...that...', 'unwavering' means steadfast, 'nourished' means to nurture, 'pursue' means to chase after."
            },
            {
                chinese: "近年来，在线教育在中国蓬勃发展，为偏远地区的学生提供了获取优质资源的途径。",
                english: "Recent years have witnessed a boom in online education across China, which allows students in remote areas to gain access to quality resources.",
                words: ["Recent years", "have witnessed", "a boom", "in online education", "across China,", "which", "allows students", "in remote areas", "to gain access", "to quality resources."],
                hint: "Note: Non-restrictive relative clause with 'which'",
                explanation: "'witnessed a boom' means to see a rapid growth, 'which' introduces a non-restrictive relative clause, 'remote areas' means distant regions, 'gain access to' means to obtain access to."
            },
            {
                chinese: "我被这场中国书法展深深吸引，它让我领略到了我们深厚文化底蕴的博大精深。",
                english: "I was completely fascinated by the Chinese calligraphy exhibition, which revealed the richness of our profound cultural heritage.",
                words: ["I was", "completely fascinated", "by the Chinese", "calligraphy exhibition,", "which", "revealed", "the richness", "of our profound", "cultural heritage."],
                hint: "Note: Past participle 'fascinated' and relative clause",
                explanation: "'completely fascinated' means totally captivated, 'calligraphy exhibition' means handwriting display, 'revealed' means to show, 'profound cultural heritage' means deep cultural foundation."
            },
            {
                chinese: "我之所以能取得进步是因为我的老师，她从未放弃我，并一直鼓励我。",
                english: "I owe my progress to my teacher, who never gave up and always encouraged me.",
                words: ["I owe", "my progress", "to my teacher,", "who", "never gave up", "and always", "encouraged me."],
                hint: "Note: 'owe...to' structure and relative clause with 'who'",
                explanation: "'owe...to' means to attribute to, 'who' introduces a relative clause modifying 'teacher', 'gave up' means to quit, 'encouraged' means to motivate."
            },
            {
                chinese: "诗歌朗诵部分引发了激烈的竞争，这成为活动的亮点。",
                english: "The poetry-recital triggered a fierce competition, which turned out to be the highlight of the event.",
                words: ["The poetry-recital", "triggered", "a fierce", "competition,", "which", "turned out", "to be", "the highlight", "of the event."],
                hint: "Note: 'triggered' means 'caused' and relative clause",
                explanation: "'poetry-recital' means poetry reading, 'triggered' means to cause, 'fierce competition' means intense rivalry, 'turned out to be' means to prove to be, 'highlight' means the most important part."
            }
        ];
        
        // Game state variables
        let currentLevel = 0;
        let score = 0;
        let timeLeft = 300;
        let streak = 0;
        let timer;
        let playerName = '';
        let gameStarted = false;
        
        // DOM elements
        const chinesePrompt = document.getElementById('chinese-prompt');
        const wordBank = document.getElementById('word-bank');
        const sentenceArea = document.getElementById('sentence-area');
        const checkBtn = document.getElementById('check-btn');
        const resetBtn = document.getElementById('reset-btn');
        const hintBtn = document.getElementById('hint-btn');
        const feedback = document.getElementById('feedback');
        const feedbackText = document.getElementById('feedback-text');
        const scoreDisplay = document.getElementById('score');
        const levelDisplay = document.getElementById('level');
        const timerDisplay = document.getElementById('timer');
        const progressFill = document.getElementById('progress-fill');
        const currentLevelDisplay = document.getElementById('current-level');
        const nextLevelDisplay = document.getElementById('next-level');
        const stars = document.querySelectorAll('.star');
        
        // Name input elements
        const nameModal = document.getElementById('name-modal');
        const playerNameInput = document.getElementById('player-name-input');
        const startGameBtn = document.getElementById('start-game-btn');
        const playerNameDisplay = document.getElementById('player-name-display');
        
        // Initialize game
        function initGame() {
            // Show name input modal first
            showNameInput();
            
            // Add event listeners
            startGameBtn.addEventListener('click', startGame);
            playerNameInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    startGame();
                }
            });
            checkBtn.addEventListener('click', checkAnswer);
            resetBtn.addEventListener('click', resetLevel);
            hintBtn.addEventListener('click', showHint);
        }
        
        // Show name input modal
        function showNameInput() {
            nameModal.style.display = 'flex';
            playerNameInput.focus();
        }
        
        // Start game with player name
        function startGame() {
            const name = playerNameInput.value.trim();
            if (name === '') {
                alert('Please enter your name!');
                return;
            }
            
            // 添加加载提示
            startGameBtn.textContent = 'Loading...';
            startGameBtn.disabled = true;
            
            // 使用setTimeout来避免阻塞UI
            setTimeout(() => {
                playerName = name;
                gameStarted = true;
                nameModal.style.display = 'none';
                
                // Show player name
                playerNameDisplay.textContent = `Player: ${playerName}`;
                playerNameDisplay.style.display = 'block';
                playerNameDisplay.style.color = '#667eea';
                playerNameDisplay.style.fontWeight = 'bold';
                playerNameDisplay.style.marginTop = '10px';
                playerNameDisplay.style.textShadow = '1px 1px 2px rgba(102, 126, 234, 0.3)';
                
                // Start the actual game
                loadLevel(currentLevel);
                startTimer();
                updateStats();
            }, 100);
        }
        
        // Load level
        function loadLevel(level) {
            const challenge = challenges[level];
            
            // 使用requestAnimationFrame优化DOM操作
            requestAnimationFrame(() => {
                // Display Chinese prompt
                chinesePrompt.textContent = challenge.chinese;
                
                // Clear word options and sentence area
                wordBank.innerHTML = '';
                sentenceArea.innerHTML = '';
                
                // Shuffle word order
                const shuffledWords = [...challenge.words].sort(() => Math.random() - 0.5);
                
                // 使用DocumentFragment优化DOM插入
                const fragment = document.createDocumentFragment();
                
                // Add word options
                shuffledWords.forEach(word => {
                    const wordElement = document.createElement('div');
                    wordElement.className = 'word-option';
                    wordElement.textContent = word;
                    
                    // Click to add to sentence area
                    wordElement.addEventListener('click', () => {
                        addWordToSentence(word);
                        wordElement.remove();
                    });
                    
                    fragment.appendChild(wordElement);
                });
                
                wordBank.appendChild(fragment);
                
                // Update level display
                levelDisplay.textContent = `${level + 1}/${challenges.length}`;
                currentLevelDisplay.textContent = level + 1;
                nextLevelDisplay.textContent = level < challenges.length - 1 ? level + 2 : "END";
                progressFill.style.width = `${(level / challenges.length) * 100}%`;
                
                // Hide feedback
                feedback.classList.remove('show');
            });
        }
        
        // Add word to sentence area
        function addWordToSentence(word) {
            const wordElement = document.createElement('div');
            wordElement.className = 'word-placed';
            wordElement.textContent = word;
            
            // Click to remove word
            wordElement.addEventListener('click', () => {
                wordElement.remove();
            });
            
            sentenceArea.appendChild(wordElement);
        }
        
        // Check answer
        function checkAnswer() {
            if (!gameStarted) return;
            
            const challenge = challenges[currentLevel];
            const placedWords = Array.from(sentenceArea.children).map(el => el.textContent);
            const correctWords = challenge.words;
            
            // Check if words are in correct order
            const isCorrect = JSON.stringify(placedWords) === JSON.stringify(correctWords);
            
            if (isCorrect) {
                score += 100;
                streak++;
                showFeedback(true, challenge.explanation);
                
                // Show stars based on performance
                showStars(3);
                
                // Move to next level after delay
                setTimeout(() => {
                    if (currentLevel < challenges.length - 1) {
                        currentLevel++;
                        loadLevel(currentLevel);
                    } else {
                        showCompletion();
                    }
                }, 2000);
            } else {
                streak = 0;
                showFeedback(false, challenge.explanation);
                showStars(0);
                // 不正确的答案不会自动进入下一步，玩家必须重新排列
            }
            
            updateStats();
        }
        
        // Show feedback
        function showFeedback(isCorrect, explanation) {
            const feedbackTitle = document.getElementById('feedback-title');
            const feedbackText = document.getElementById('feedback-text');
            
            if (isCorrect) {
                feedbackTitle.textContent = '🎉 Correct!';
                feedbackTitle.style.color = '#28a745';
            } else {
                feedbackTitle.textContent = '❌ Needs Adjustment';
                feedbackTitle.style.color = '#dc3545';
            }
            
            feedbackText.innerHTML = `
                <strong>Correct Answer:</strong><br>
                ${challenges[currentLevel].english}<br><br>
                <strong>Explanation:</strong><br>
                ${explanation}
            `;
            
            feedback.classList.add('show');
        }
        
        // Show stars
        function showStars(count) {
            stars.forEach((star, index) => {
                if (index < count) {
                    star.style.color = '#ffd700';
                    star.style.opacity = '1';
                } else {
                    star.style.color = '#ccc';
                    star.style.opacity = '0.3';
                }
            });
        }
        
        // Reset level
        function resetLevel() {
            loadLevel(currentLevel);
            feedback.classList.remove('show');
        }
        
        // Show hint
        function showHint() {
            const challenge = challenges[currentLevel];
            alert(`Hint: ${challenge.hint}`);
        }
        
        // Update stats
        function updateStats() {
            scoreDisplay.textContent = score;
            levelDisplay.textContent = `${currentLevel + 1}/${challenges.length}`;
        }
        
        // Start timer
        function startTimer() {
            timer = setInterval(() => {
                timeLeft--;
                const minutes = Math.floor(timeLeft / 60);
                const seconds = timeLeft % 60;
                timerDisplay.textContent = `${minutes}:${seconds.toString().padStart(2, '0')}`;
                
                if (timeLeft <= 0) {
                    clearInterval(timer);
                    alert('Time\'s up! Game over');
                }
            }, 1000);
        }
        
        // Show completion
        function showCompletion() {
            const completionMessage = `🎉 Congratulations ${playerName}!\n\nYou have successfully completed all levels!\nFinal Score: ${score} points\n\nThank you for playing!`;
            alert(completionMessage);
        }
        
        // Start game when page loads
        window.addEventListener('load', initGame);
    </script>
</body>
</html>
